<template>
	<a-cascader
		:fieldNames="{ label: 'name', value: 'code', children: 'children' }"
		:options="areaData"
		:placeholder="placeholder"
		v-model="selectedValues"
		@change="onChange"
	/>
</template>
<script>
	import areaData from '../../config/area'
	export default {
		name: 'AreaSelect',
		props: {
			placeholder: {
				type: String,
				default: '请选择省市区'
			},
			defaultValue: {
				type: Array,
				default() {
					return []
				}
			}
		},
		emits: ['change'],
		data() {
			return {
				//地区数据
				areaData,
				//选择的数据
				selectedValues: []
			}
		},
		watch: {
			defaultValue(newValue) {
				if (newValue.length) {
					this.selectedValues = newValue
				} else {
					this.selectedValues = []
				}
			}
		},
		created() {
			if (this.defaultValue.length) {
				this.selectedValues = [...this.defaultValue]
			}
		},
		methods: {
			//选择好之后的回调
			onChange(value) {
				this.$emit('change', value)
			}
		}
	}
</script>
<style lang="scss" scoped></style>
